<style lang="less">

</style>
<template>
    <Modal
        v-model="drawer.show" transfer
        :title="lang.edit"
        :width="width"
        class-name="cm-modal-resize"
        :z-index="zIndex"
        :draggable="true"
        :closable="true"
        :mask-closable="false"
        @on-ok="ok">
        <span slot="header" :style="titleStyle">{{lang.edit }}</span>
        <div v-if="drawer.show" class="cm-modal-content">
           <cfgForm :cols="cols" :rules="rules" :labelWidth="labelWidth" :columns="columns" ref="_frm" :data="data.values"></cfgForm>
           <slot></slot>
        </div>
        <template slot="footer">
            <!-- 对于具有验证，点击提交不能消失的对话框，必须使用这种插槽的用法 -->
            <Button type="text" @click="drawer.show=false">{{lang.cancel}}</Button>
            <Button type="primary" @click="ok">{{lang.save}}</Button>
      </template>
    </Modal>
</template>
<script>
    import { typeClassName } from '@/pages/config/classNameMap';
    export default {
        data () {
            return {

            }
        },
        props: {
            modelType: {
                default: () => {
                    return '';
                }
            },
            width: {
                default: () => {
                    return 1024;
                }
            },
            zIndex: {
                default: () => {
                    return 100;
                }
            },
            titleStyle: {
                default: () => {
                    return {}
                }
            },
            drawer: {
                default: () => {
                    return {
                        show: false
                    };
                }
            },
            columns: {
                default: () => {
                    return [];
                }
            },
            cols: {
                default: () => {
                    return 2;
                }
            },
            rules: {
                default: () => {
                    return {};
                }
            },
            data: {
                default: () => {
                    return {};
                }
            },
            labelWidth: {
                default: () => {
                    return 100;
                }
            },
            labelPosition: {
                default: () => {
                    return 'right';
                }
            },
            energyList: {
                default: () => {
                    return [];
                }
            },
        },
        computed: {
            lang () {
                return {
                    'en-US': {
                        edit: 'edit',
                        new: 'new',
                        detail: 'detail',
                        action: 'action',
                        submit: 'submit',
                        cancel: 'cancel',
                        save: 'save'
                    },
                    'zh-CN': {
                        edit: '编辑',
                        new: '添加',
                        detail: '查看',
                        action: '操作',
                        submit: '提交',
                        cancel: '取消',
                        save: '确定'
                    }
                }[this.G_Locale]
            }
        },
        watch: {
            'data.values.sf_energyName': {
                handler (type,oldType) {
                  if(type!==oldType){
                    this.changeEnergyName(type)
                  }
                },
                deep: true
            },
        },
        methods: {
            /**
             * 提交添加或修改数据
             */
            ok () {
                this.loading = true;
                this.$refs._frm.$refs.form.validate(valid => {
                    if (valid) {
                        let data = this.tools.lodash.cloneDeep(this.data)
                        this.$emit('submit', data);
                    }
                });
            },
            changeEnergyName(type){
               this.data.values.sf_energyCode = type;
               let index = this.energyList.findIndex(d=>d.sf_energyCode===type)
               if(index!==-1){
                  this.data.values.sf_energyType = this.energyList[index].typeName;
                  this.data.values.if_linkId = this.energyList[index].id;
                  this.data.values.sf_energyTypeName = this.energyList[index].typeName;
                  this.data.values.sf_status = this.energyList[index].status;
                  this.data.values.sf_energySource = this.energyList[index].energySource;
                  this.data.values.sf_measuringUnit = this.energyList[index].measuringUnit;
                  this.data.values.sf_pointName = this.energyList[index].point;
                  this.data.values.weight = this.energyList[index].weight;
                  this.data.values.targetValue = this.energyList[index].target;
                  this.data.values.sf_status = this.energyList[index].status;
                  // // 修改能源类型名称
                  // let energyTypeFilter = {
                  //     className: typeClassName['energyType'].className,
                  //     type: typeClassName['energyType'].type
                  // }
                  // this.getEnergyTypeName(energyTypeFilter)
               }
            },
            getEnergyTypeName(condition){
               this.$api.LogicInstance.query(condition).then(res=>{
                  if (!res[0].hier || res[0].hier.length === 0 || !res[0].hier[0].basic || res[0].hier[0].basic.length === 0) {
                      return false;
                  } else {
                      let options = res[0].hier[0].basic.map(d=>d.values);
                      let index = options.findIndex(d=>d.sf_code===this.data.values.sf_energyType)
                      if(index!==-1){
                        let sf_energyTypeName = options[index].sf_name;
                        let values = this.tools.lodash.cloneDeep(this.data.values)
                        values = {...values,sf_energyTypeName}
                        this.$set(this.data,'values',values)
                      }
                  }
               })
            },
        }
    }
</script>
